<template>
  <zk-card class="box-card" header="创建公司">
    <zk-form ref="cmpform" :model="company" :rules="rules"  label-width="90px">
      <zk-form-item label="公司名称" prop="cmpName">
        <zk-input v-model="company.cmpName" name="cmpName" placeholder="请输入公司的名称"></zk-input>
      </zk-form-item>
      <zk-form-item label="公司区域" prop="city" required>
        <area-select 
          v-on:countrychange="company.country = arguments[0]"
          v-on:provincechange="company.province = arguments[0]"
          v-on:citychange="company.city = arguments[0]">
        </area-select>
      </zk-form-item>
      <zk-form-item label="公司地址" prop="cmpAddress">
        <zk-input v-model="company.cmpAddress" name="cmpAddress"  placeholder="请输入公司的通讯地址"></zk-input>
      </zk-form-item>
      <zk-form-item label="行业" name="industryId" prop="industryId">
        <zk-select v-model="company.industryId" name="industryId" placeholder="请选择行业">
          <zk-option
            v-for="industry in industryList"
            :label="industry.name"
            :value="industry.id"
            >
          </zk-option>
        </zk-select>
      </zk-form-item>
      <zk-form-item label="联系电话" name="phones" prop="phones">
        <zk-input v-model="company.phones" placeholder="请输入公司的联系电话"></zk-input>
      </zk-form-item>
      <zk-form-item label="企业网站" name="website" prop="website">
        <zk-input v-model="company.website" placeholder="请输入公司的网址"></zk-input>
      </zk-form-item>
      <zk-form-item label="邀请码" name="inviteCode" prop="inviteCode">
        <zk-input v-model="company.inviteCode" placeholder="请填写正确的邀请码"></zk-input>
      </zk-form-item>
    </zk-form>
    <div slot="footer">
      <zk-button type="primary" v-on:click="handleSubmit">确定</zk-button>
        <zk-button  v-on:click="cancel">取消</zk-button>
    </div>
  </zk-card>
</template>
<script>
/**
 * @author: guocailee
 */
import areaSelect from './areaSelect.vue'
import * as industry from 'src/api/industry'
export default {
  name: 'createCompany',
  data() {
    return {
      industryList: [],
      company: {
        website: '',
        phones: '',
        cmpName: '',
        cmpAddress: '',
        address: '',
        country: '',
        province: '',
        city: '',
        coorLongitude: '',
        coorWeft: '',
        desc: '',
        district: '',
        industryDesc: '',
        industryId: '',
        logo: '',
        inviteCode: ''
      },
      rules: {
        cmpName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, message: '长度在 3 个字符以上', trigger: 'blur' }
        ],
        cmpAddress: [
          { min: 5, message: '长度在5个字符以上', trigger: 'change' }
        ],
        phones: [
          { type: 'tel', message: '请输入正确的联系电话，如：1234-1111111' }
        ],
        website: [
          { type: 'url', message: '请输入正确的网址，如：http://www.' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      var self = this
      this.$refs.cmpform.validate((valid) => {
        if (valid) {
          self.$fetch.submit('apiv1/content/createCompany', self.company)
        } else {
          return false
        }
      })
    },
    cancel() {
    }
  },
  mounted() {
    var self = this
    industry.query().then(data => {
      self.industryList = data.body.payload.results
    })
  },
  components: {
    areaSelect
  }
}
</script>